<template>
  <el-card shadow="never" class="aui-card--fill">
    <div class="mod-IsShipPortLine__isshipportline">
      <el-form :inline="true" :model="dataForm" ref="forms" @keyup.enter.native="getDatsaList()" :rules="dataRule">
        <el-form-item>
          <el-select v-model="dataForm.startPortNo" placeholder="出发港口" clearable>
            <el-option v-for="(item, index) in startOptions" :key="index" :value="item.portNum" :label="item.portName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-select v-model="dataForm.endPortNo" placeholder="到达港口" clearable>
            <el-option v-for="(item, index) in endOptions" :key="index" :value="item.portNum" :label="item.portName">
            </el-option>
          </el-select>
        </el-form-item>
        <el-form-item>
          <el-date-picker v-model="dataForm.startDate" type="date" placeholder="开船日期" value-format="yyyy-MM-dd">
          </el-date-picker>
        </el-form-item>
        <el-form-item>
          <el-button @click="queryValidate()">{{ $t("query") }}</el-button>
        </el-form-item>
        <el-form-item v-if="$hasPermission('travel:isshipport:pageTicketExport')" >
          <el-button type="primary" @click="exportHandle()">{{
            $t("export")
          }}</el-button>
        </el-form-item>
        <!-- <el-form-item>
          <el-button v-if="$hasPermission('IsShipPortLine:isshipportline:save')" type="primary"
            @click="addOrUpdateHandle()">{{ $t("add") }}</el-button>
        </el-form-item>
        <el-form-item>
          <el-button v-if="$hasPermission('IsShipPortLine:isshipportline:delete')" type="danger"
            @click="deleteHandle()">{{ $t("deleteBatch") }}</el-button>
        </el-form-item> -->
      </el-form>
      <el-table v-loading="dataListLoading" :data="dataList" border @selection-change="dataListSelectionChangeHandle"
        style="width: 100%">
        <el-table-column type="selection" header-align="center" align="center" width="50"></el-table-column>
        <!-- <el-table-column prop="id" label="ID" header-align="center" align="center"></el-table-column>
        <el-table-column prop="shipPortId" label="港口ID" header-align="center" align="center"></el-table-column> -->
        <el-table-column prop="lineNum" label="航线号" header-align="center" align="center"></el-table-column>
        <!-- <el-table-column prop="lineName" label="航线名" header-align="center" :show-overflow-tooltip="true"
          align="center"></el-table-column> -->
        <el-table-column prop="lineNo" label="航次" header-align="center" align="center"></el-table-column>
        <el-table-column prop="shipName" label="船名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="startPortName" label="起始港名" header-align="center" :show-overflow-tooltip="true"
          align="center"></el-table-column>
        <el-table-column prop="startPortNo" label="出发港口" header-align="center" align="center"></el-table-column>
        <el-table-column prop="endPortName" label="停靠港名" header-align="center" :show-overflow-tooltip="true"
          align="center"></el-table-column>
        <el-table-column prop="endPortNo" label="到达港口" header-align="center" align="center"></el-table-column>
        <el-table-column prop="classNum" label="舱位等级号" header-align="center" align="center"></el-table-column>
        <el-table-column prop="className" label="舱位等级名" header-align="center" align="center"></el-table-column>
        <el-table-column prop="totalCount" label="当前舱位等级剩余票数" header-align="center" align="center"></el-table-column>
        <el-table-column prop="originPrice" label="原票价" header-align="center" align="center"></el-table-column>
        <el-table-column prop="totalPrice" label="实际售价" header-align="center" align="center"></el-table-column>
        <el-table-column prop="halfPrice" label="儿童票价格" header-align="center" align="center"></el-table-column>
        <el-table-column prop="candidateCount" label="候补票数" header-align="center" align="center"></el-table-column>

        <!-- <el-table-column prop="status" label="'状态  0：停用    1：正常'" header-align="center" align="center"></el-table-column>
        <el-table-column prop="remark" label="备注" header-align="center" align="center"></el-table-column>
        <el-table-column prop="delFlag" label="'删除标识  0：未删除    1：删除'" header-align="center" align="center"></el-table-column>
        <el-table-column prop="creator" label="创建者" header-align="center" align="center"></el-table-column>
        <el-table-column prop="createDate" label="创建时间" header-align="center" align="center"></el-table-column>
        <el-table-column prop="updater" label="更新者" header-align="center" align="center"></el-table-column>
        <el-table-column prop="updateDate" label="更新时间" header-align="center" align="center"></el-table-column> -->
        <!-- <el-table-column
          :label="$t('handle')"
          fixed="right"
          header-align="center"
          align="center"
          width="150"
        >
          <template slot-scope="scope">
            <el-button
              v-if="$hasPermission('IsShipPortLine:isshipportline:update')"
              type="text"
              size="small"
              @click="addOrUpdateHandle(scope.row.id)"
              >{{ $t("update") }}</el-button
            >
            <el-button
              v-if="$hasPermission('IsShipPortLine:isshipportline:delete')"
              type="text"
              size="small"
              @click="deleteHandle(scope.row.id)"
              >{{ $t("delete") }}</el-button
            >
          </template>
        </el-table-column> -->
      </el-table>
      <el-pagination :current-page="page" :page-sizes="[10, 20, 50, 100]" :page-size="limit" :total="total"
        layout="total, sizes, prev, pager, next, jumper" @size-change="pageSizeChangeHandle"
        @current-change="pageCurrentChangeHandle">
      </el-pagination>
      <!-- 弹窗, 新增 / 修改 -->
      <add-or-update v-if="addOrUpdateVisible" ref="addOrUpdate" @refreshDataList="getDataList"></add-or-update>
    </div>
  </el-card>
</template>

<script>
import mixinViewModule from "@/mixins/view-module";
import AddOrUpdate from "./isshipticket-add-or-update.vue";
let now = new Date();
let year = now.getFullYear();
let month = String(now.getMonth() + 1).padStart(2, "0");
const day = String(now.getDate()).padStart(2, "0");
const formattedDate = `${year}-${month}-${day}`;
export default {
  mixins: [mixinViewModule],
  data() {
    return {
      startOptions: [],
      endOptions: [],
      mixinViewModuleOptions: {
        getDataListURL: "/travel/isshipport/pageTicket",
        getDataListIsPage: true,
        exportURL: "/travel/isshipport/pageTicket/export",
        deleteURL: "/travel/isshipportline",
        deleteIsBatch: true,
      },
      dataForm: {
        startPortNo:'1028',
        endPortNo:'1010',
        startDate: formattedDate,
      },
    };
  },
  computed: {
    dataRule() {
      return {
        startPortNo: [
          { required: true, message: "请选择出发港口", trigger: "change" },
        ],
        endPortNo: [
          { required: true, message: "请选择到达港口", trigger: "change" },
        ],
        startDate: [
          { required: true, message: "请选择开船日期", trigger: "change" },
        ],
      };
    },
  },
  created() {
    Promise.all([this.queryOption(0), this.queryOption(1)]).then(() => {
      // this.dataForm.startPortNo = null;
      // this.dataForm.endPortNo = null;
    });
  },
  watch: {},
  components: {
    AddOrUpdate,
  },
  methods: {
    queryOption(type) {
      this.$http
        .get("/travel/isshipport/listPort" +
          `${"?type=" + type}`
        )
        .then(({ data: res }) => {
          switch (type) {
            case 0:
              this.startOptions = res.data;
              break;
            case 1:
              this.endOptions = res.data;
              break;
          }
        });
    },
    queryValidate() {
      if (
        this.dataForm.startPortNo &&
        this.dataForm.endPortNo &&
        this.dataForm.startDate
      ) {
        this.dataListLoading = true;
        this.$http
          .get(this.mixinViewModuleOptions.getDataListURL, {
            params: {
              page: this.mixinViewModuleOptions.getDataListIsPage
                ? this.page
                : null,
              limit: this.mixinViewModuleOptions.getDataListIsPage
                ? this.limit
                : null,
              ...this.dataForm,
            },
          })
          .then(({ data: res }) => {
            this.dataListLoading = false;
            if (res.code !== 0) {
              this.dataList = [];
              this.total = 0;
              return this.$message.error(res.msg);
            }
            this.dataList = this.mixinViewModuleOptions.getDataListIsPage
              ? res.data.list
              : res.data;
            this.total = this.mixinViewModuleOptions.getDataListIsPage
              ? res.data.total
              : 0;
          })
          .catch(() => {
            this.dataListLoading = false;
          });
      } else {
        this.$message({
          type: 'warning',
          message: "查询条件不能为空",
        });
      }
    },
  },
};
</script>
